<template>
  <div>
    <!-- 面包屑导航条 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/toOneList' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>工艺中心</el-breadcrumb-item>
      <el-breadcrumb-item>工艺管理</el-breadcrumb-item>
      <el-breadcrumb-item>工艺制作</el-breadcrumb-item>
    </el-breadcrumb>
    <!--标题-->
    <el-row class="box2">
      <h1 class="title">工艺制作界面</h1>
    </el-row>
    <!--中间间隔-->
    <el-row class="box"></el-row>
    <!--制作界面-->
    <el-card class="box-card">
      <!--回显零件信息-->
      <el-form v-model="hxdata">
      <el-row class="box3">
        <el-col :span="4"></el-col>
        <el-col :span="4">
          <el-form-item label="图号">
            <el-input type="text" v-model="hxdata.code" disabled="disabled"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4"></el-col>
        <el-col :span="4">
          <el-form-item label="零件名称">
            <el-input type="text" v-model="hxdata.name" disabled="disabled"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4"></el-col>
        <el-col :span="4">
          <el-form-item label="数量">
            <el-input type="text" v-model="hxdata.num" disabled="disabled"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      </el-form>
      <!--中间间隔-->
      <el-row class="box"></el-row>
      <el-form :model="addForm" status-icon>
        <el-button @click="addMaterTable()" plain type="info">添加原料</el-button>
        <!--添加原材料界面-->
        <el-table
          :data="addForm.itMater"
          stripe
          style="width: 100%">
          <el-table-column
            type="index"
            width="50">
          </el-table-column>
          <el-table-column
            label="原料名称"
            width="180">
            <template slot-scope="scope">
              <el-form-item>
                <el-select v-model="addForm.itMater[scope.$index].materialId">
                  <el-option v-for="item in materlist"
                             :key="item.id"
                             :value="item.id"
                             :label="item.name"
                  ></el-option>
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            label="规格"
            prop="spec"
            width="180">
            <template slot-scope="scope">
              <el-select v-model="addForm.itMater[scope.$index].spec">
                <el-option label='板' :value="0"></el-option>
                <el-option label="棒" :value="1"></el-option>
				</el-select>
            </template>
          </el-table-column>
          <el-table-column
            label="下料件数"
            width="180">
              <template slot-scope="scope">
                <el-form-item>
                <el-input v-model="addForm.itMater[scope.$index].num"></el-input>
                </el-form-item>
              </template>
          </el-table-column>
          <el-table-column
            label="下料尺寸(mm)"
            width="180">
            <template slot-scope="scope">
              <el-input v-if="scope.row.spec==0" v-model="addForm.itMater[scope.$index].bfLength"  placeholder="长" @change="getMaterSize(scope)" ></el-input>
              <el-input v-if="scope.row.spec==0" v-model="addForm.itMater[scope.$index].bfWidth"  placeholder="宽" @change="getMaterSize(scope)" ></el-input>
              <el-input v-if="scope.row.spec==1 || scope.row.spec==0" v-model="addForm.itMater[scope.$index].bfHight" @change="getMaterSize(scope)"  placeholder="高"></el-input>
              <el-input v-if="scope.row.spec==1" v-model="addForm.itMater[scope.$index].bfDiam"  placeholder="直径" @change="getMaterSize(scope)" ></el-input><!--规格棒筒才显示-->
            </template>
          </el-table-column>
          <el-table-column
            label="产品尺寸(mm)"
            width="180">
            <template slot-scope="scope">
              <el-input v-if="scope.row.spec==0" v-model="addForm.itMater[scope.$index].afLength" placeholder="长"></el-input>
              <el-input v-if="scope.row.spec==0" v-model="addForm.itMater[scope.$index].afWidth" placeholder="宽"></el-input>
              <el-input v-if="scope.row.spec==1 || scope.row.spec==0" v-model="addForm.itMater[scope.$index].afHight" placeholder="高"></el-input>
              <el-input v-if="scope.row.spec==1" v-model="addForm.itMater[scope.$index].afDiam"  placeholder="直径"></el-input><!--规格为棒才显示-->
            </template>
          </el-table-column>
          <el-table-column
            label="产品面积(cm^2)"
            prop="afArea"
            width="180">
            <template slot-scope="scope">
              <el-input v-model="addForm.itMater[scope.$index].afArea"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="产品重量(kg)"
            prop="afWeight"
            width="180">
            <template slot-scope="scope">
              <el-input v-model="addForm.itMater[scope.$index].afWeight"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作">
            <template slot-scope="scope">
                <el-button @click="delTable(scope.$index)" type="danger"><i class="el-icon-delete" circle></i></el-button><!--删除按钮-->
            </template>
          </el-table-column>
        </el-table>
        <el-button @click="addProTable()" plain type="info">添加工序</el-button>
        <el-table
          :data="addForm.itPro"
          stripe
          style="width: 100%">
          <el-table-column
            type="index"
            width="50">
          </el-table-column>
          <el-table-column
            label="工序名称"
            width="180">
            <template slot-scope="scope">
              <el-select v-model="addForm.itPro[scope.$index].processId" @change="getProByid(scope)">
                <el-option v-for="item in prolist"
                 :key="item.id"
                 :value="item.id"
                 :label="item.name"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            label="准备工时(min)"
            prop="preWorkHour"
            width="180">
            <template slot-scope="scope">
              <el-input v-model="addForm.itPro[scope.$index].preWorkHour"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="单件工时(min)"
            prop="afWeight"
            width="180">
            <template slot-scope="scope">
              <el-input v-model="addForm.itPro[scope.$index].sgWorkHour" @change="getProSize(scope)"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作">
            <template slot-scope="scope">
              <el-button @click="delTable2(scope.$index)" type="danger"><i class="el-icon-delete" circle></i></el-button><!--删除按钮-->
            </template>
          </el-table-column>
        </el-table>
          <el-button @click="submitck()" plain type="info">添加</el-button>
          <el-button @click="reset()" type="primary">重置</el-button>
          <el-button @click="goback()" type="primary">取消</el-button>
      </el-form>
    </el-card>
  </div>
</template>

<script>
    export default {
        name: "makeAdd",
      data(){
        return{
          materflag:false,
          proflag:false,
          us:{
            id:'',
            userName:'',
            fullName:'',
          },//获取会话的用户对象
          proData:{
            ctype:"",//收费方式（0按时间，1按重量，2，按面积）
            price:"",
            prePrice:"",
          },//用于获取每一行的工序价格信息
          prolist:[{//工序下拉框集合
            id:'',
            name:"",
          }],
          MaterPro:[//订单零件工序表的数据
            {
              proCost:"",//工序费用
              preCost:"",//准备工时费
            }
          ],
          materlist:[{//原料下拉框集合
            id:'',
            name:"",
            density:'',
            price:'',//材料单价
          }],
          hxdata:{//对应零件的回显
            id:"",
            code:"",
            num:"",
            name:"",
            orderId:"",//对应订单id
          },
          addForm:{
            itMater:[
              {
                orderItemId:'',
                materialId:"",
                spec:"",//规格
                num:"",//下料数
                bfLength:"",//长宽高
                bfWidth:"",
                bfHight:"",
                bfDiam:"",//直径
                afLength:'',
                afWidth:'',
                afHight:"",
                afDiam:"",
                afArea:"",
                afWeight:"",
                materCost:"",//材料费（产品重量*原材料单价 之和）
              }
            ],
            itPro:[//传到后台的工序
              {
                orderItemId:"",
                processId:'',
                preWorkHour:"",
                sn:"",//排序数
                sgWorkHour:"",//单件工时
                proCost:"",//工序费用
                preCost:"",//准备工时费
              }
            ]
          },
          orderItemId:'',//路由获取订单零件id
          kk:0,
        }
      },
      methods:{
        getProByid(scope){//获取每行选中的工序的信息
          debugger
          let id=this.addForm.itPro[scope.$index].processId;
          this.$http.post("/pro/getById/"+id).then((res) => {
            debugger
            this.proData=res.data.result;
          });
        },
        getMaterSize(scope){//填写下料尺寸和个数，获取产品尺寸
          //设置订单零件id
          this.addForm.itMater[scope.$index].orderItemId=this.hxdata.id;
          let a= this.addForm.itMater[scope.$index].num;//下料个数
          let b=this.hxdata.num;//获取零件加工个数
          let c=this.addForm.itMater[scope.$index].bfHight;//下料尺寸的高
          let d=this.addForm.itMater[scope.$index].spec;//获取规格
          let e=this.materlist[scope.$index].density;//当前选中的原料的密度
          if(d==1){//筒，只需要赋值高和直径
            //单个产品尺寸的高/直径
            this.addForm.itMater[scope.$index].afHight=(a*c)/b;
            this.addForm.itMater[scope.$index].afDiam=this.addForm.itMater[scope.$index].bfDiam
            let r=this.addForm.itMater[scope.$index].bfDiam/2;
            //面积=2 *（π*半径^2）+ 2*半径*π*高
            this.addForm.itMater[scope.$index].afArea=(2*(3.14*r*r)+(2*3.14*r*this.addForm.itMater[scope.$index].afHight))/100;
            //重量=（π*（直径/2）^2 * 高 * 下料件数）/ 加工数量
            this.addForm.itMater[scope.$index].afWeight=((3.14*r*r*this.addForm.itMater[scope.$index].afHight*a)/b)/100000;
            //单个材料费： 材料费=产品重量*原材料单价
            this.addForm.itMater[scope.$index].materCost=(this.addForm.itMater[scope.$index].afWeight*this.materlist[scope.$index].price);
          }else{//板
            //产品尺寸的高/长/宽
            this.addForm.itMater[scope.$index].afHight=(a*c)/b;
            this.addForm.itMater[scope.$index].afLength=this.addForm.itMater[scope.$index].bfLength;
            this.addForm.itMater[scope.$index].afWidth=this.addForm.itMater[scope.$index].bfWidth;

            let hight=this.addForm.itMater[scope.$index].afHight;
            let length=this.addForm.itMater[scope.$index].afLength;
            let width=this.addForm.itMater[scope.$index].afWidth;
            //面积=2 *（长*宽+长*高+宽*高）/加工数量(-------------------------)
            this.addForm.itMater[scope.$index].afArea=(2*(length*width+length*hight+width*hight)/100)/b.toFixed(4);
            //重量=（长*宽*高*原材料密度*下料件数）/ 加工数量(化成KG)
            this.addForm.itMater[scope.$index].afWeight=((length*width*hight*e*a)/b/100000).toFixed(4);
            //单个材料费： 材料费=产品重量*原材料单价
            this.addForm.itMater[scope.$index].materCost=(this.addForm.itMater[scope.$index].afWeight*this.materlist[scope.$index].price);
          }
        },
          getMaterial(){//获取原材料的下拉框
            this.$http.post("/mater/getMaterial").then((res) => {
                this.materlist=res.data.result;
            });
          },
        getPro:function(){//获取工序的下拉框
          this.$http.post("/pro/getPro").then((res) => {
            debugger
            this.prolist=res.data.result;
          });
        },
        delTable(index){//删除多余的表格
            this.addForm.itMater.splice(index, 1);
        },
        delTable2(index){//删除多余的表格
          debugger
          var index = this.addForm.itPro.indexOf(index);
          this.addForm.itPro.splice(index, 1);
        },
        addMaterTable(){//添加原料表格
          debugger
            this.addForm.itMater.push(
              {materialId:"", spec:"",num:'', bfLength:"", bfWidth:"", bfHight:"", bfDiam:"", afLength:'', afWidth:'', afHight:"", afDiam:"", afArea:"", afWeight:"",}
            )
        },
        addProTable(){//添加工序表格
          debugger
          this.addForm.itPro.push(
            {processId:'', preWorkHour:"", sn:"", sgWorkHour:"", proCost:"", preCost:""}
          )
        },
        getProSize(scope){//获取单个零件的工序费用
          debugger
          //设置订单零件id
          this.addForm.itPro[scope.$index].orderItemId=this.hxdata.id;
          //设置排序数
          this.kk=Number(this.kk+1);
          this.addForm.itPro[scope.$index].sn=this.kk;
          /**
           *
           工序费用：
           按时间：工序单价*单件工时
           按重量：工序单价*产品重量
           按面积：工序单价*产品表面积

           准备工时费：（准备工时*工序准备工时费）/ 加工数量
           *
           */
          let a=this.proData.ctype;//获取收费方式判断:收费方式（0按时间，1按重量，2，按面积）
          let b=this.proData.price; //工序单价
          let c=this.proData.prePrice; //准备工时单价
          let d=this.addForm.itPro[scope.$index].sgWorkHour;//单件工时
          let e=this.addForm.itPro[scope.$index].preWorkHour;//准备工时
          let f=this.hxdata.num;//获取零件加工个数
          let o=e/f;//单件准备工时(工序准备工时要分摊到每一个零件上)
          this.addForm.itPro[scope.$index].preWorkHour=o;
          let m = 0.00;//原料的总重量
          let n = 0.00;//原料的总面积
          for (var i =0;i<this.addForm.itMater.length;i++){
            m+=this.addForm.itMater[i].afWeight;
            n+=this.addForm.itMater[i].afArea;
          }
          //1------------工序费用分类计算
          if(a==0) { // 按时间（工序）：工序单价*单件工时
            this.addForm.itPro[scope.$index].proCost = b * d;//当前行的工序费
          }else if(a==1){//按重量：工序单价*原料总重量
              this.addForm.itPro[scope.$index].proCost = b*m;
          }else if(a==2){//按面积：工序单价*原料总表面积
              this.addForm.itPro[scope.$index].proCost = b*n;
          }
          //2-----------准备工时费用计算（单件准备工时*准备工时费）
          this.addForm.itPro[scope.$index].preCost= o*c;//当前行的准备工时费
        },
        hx(){//根据id查询对应订单零件的信息，返回显示
          this.$http.post("/order/getItemByOrderItemId/"+this.orderItemId).then((res) => {
            debugger;
            if (res.data.success) {
              this.hxdata=res.data.result;
              this.$message({
                message:res.data.message,
                type:"success"
              })
            } else {
              this.$message.error(res.data.message);
            }
          });
        },
        hx2(){//根据订单零件id查询工序中间表和原料中间表，返回显示
          this.$http.post("/order/hxMaterAndPro/"+this.orderItemId).then((res) => {
            debugger;
            if (res.data.success) {
              this.addForm.itMater=res.data.result.itMater;
              this.addForm.itPro=res.data.result.itPro;
              this.$message({
                message:res.data.message,
                type:"success"
              })
            } else {
              this.$message.error(res.data.message);
            }
          });
        },
        goback(){//返回
          this.$router.push('/make');
        },
        submitck(){//添加验证
          debugger
          if (this.addForm.itMater.length == 0 || this.addForm.itMater.length == 0) {
            if (this.addForm.itMater.length == 0) {
              this.$message({
                type: 'warning',
                showClose: true,
                message: '未选择原材料'
              })
            }
            if (this.addForm.itPro.length == 0) {
              this.$message({
                type: 'warning',
                showClose: true,
                message: '未选择工序'
              })
            }
            return
          }else{
            debugger;
              for (var i = 0; i < this.addForm.itMater.length; i++) {
                if (this.addForm.itMater[i].afWeight == "") {
                  this.materflag = false
                  break;
                }
                this.materflag = true
            }
            for (var i = 0; i < this.addForm.itPro.length; i++) {
              if (this.addForm.itPro[i].processId == "") {
                this.proflag = false
                break;
              }
              if (this.addForm.itPro[i].preWorkHour == "") {
                this.proflag = false
                break;
              }
              if (this.addForm.itPro[i].sgWorkHour == "") {
                this.proflag = false
                break;
              }
              this.proflag = true
            }
            if(this.materflag && this.proflag){
              this.save();
            }else{
              if(!this.materflag) {
                this.$message({
                  type: 'warning',
                  showClose: true,
                  message: '原材料未完善'
                })
              }
              if(!this.proflag){
                this.$message({
                  type: 'warning',
                  showClose: true,
                  message: '工序未完善'
                })
              }
            }
          }
        },
        save() {//添加
          if(this.addForm!=null){
            let oid=this.hxdata.orderId;
            let uname=this.us.fullName;
            let uid=this.us.id;
            let oi=this.orderItemId;
            this.$http.post("/order/saveMaterAndPro/"+uname+"/"+uid+"/"+oid+"/"+oi,this.addForm).then((res) => {
              if (res.data.success) {
                this.$message({
                  message:res.data.message,
                  type:"success"
                })
                this.$router.push('/make');
              } else {
                this.$message.error(res.data.message);
              }
            });
          }else{
            this.$message({
              type: 'warning',
              showClose: true,
              message: '工序或原材料未完善'
            })
            return;
          }
        },
        reset(){//重置
          this.addForm={};
        },
      },
      mounted() {
          debugger
        this.orderItemId=this.$route.query.id; //路由获取值
        this.mark=this.$route.query.mark; //路由获取值
        this.us=JSON.parse(sessionStorage.getItem("user"));
        this.hx();
        this.hx2();
        this.getMaterial();
        this.getPro();
      }
    }
</script>

<style scoped>
  .row-bg {/*添加界面布局的样式*/
    padding: 10px 0;
  }
  .box2{/*添加界面的样式*/
    height: 80px;
    border-radius: 40px;
  }
  .box-card{/*列表的样式*/
    border-radius: 30px;
  }
  .box3{/*回显数据*/
    height: 100px;
  }
  .title{
    line-height:2.3px;
    text-align: center;
  }
</style>
